<template>
    <!--全美地图静态展示-->
    <section class="US-static-map-box" v-show="USStaticMapShow">
        <figure class="US-map-bg">
            <aside class="US-map-hot-city clearfix" style="left: 229px; top: 45px;">
                <span class="span-city" style="left: 0; top: 0;">华盛顿州</span>
                <div class="span-city-content" style="left: -101px; top: -104px;">
                    <div class="top-box">
                        <div>华盛顿州</div>
                        <p>State of Washington</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in Washington_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>
            <aside class="US-map-hot-city clearfix" style="left: 240px; top: 215px;">
                <span class="span-city" style="left: 0; top: 0;">加州</span>
                <div class="span-city-content" style="left: -117px; top: -104px;">
                    <div class="top-box">
                        <div>加州</div>
                        <p>State of California</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in California_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

            <aside class="US-map-hot-city clearfix" style="left: 470px; top: 290px;">
                <span class="span-city" style="left: 0; top: 0;">得克萨斯州</span>
                <div class="span-city-content" style="left: -93px; top: -104px;">
                    <div class="top-box">
                        <div>得克萨斯州</div>
                        <p>State of Texas</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in Texas_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

            <aside class="US-map-hot-city clearfix" style="left: 590px; top: 150px;">
                <span class="span-city" style="left: 0; top: 0;">伊利诺斯州</span>
                <div class="span-city-content" style="left: -95px; top: -85px;">
                    <div class="top-box">
                        <div>伊利诺斯州</div>
                        <p>State of Illinois</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in Illinois_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

            <aside class="US-map-hot-city clearfix" style="left: 670px; top: 290px;">
                <span class="span-city" style="left: 0; top: 0;">佐治亚州</span>
                <div class="span-city-content" style="left: -99px; top: -104px;">
                    <div class="top-box">
                        <div>佐治亚州</div>
                        <p>State of Georgia</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in Georgia_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

            <aside class="US-map-hot-city clearfix" style="left: 690px; top: 350px;">
                <span class="span-city" style="left: 0; top: 0;">佛罗里达州</span>
                <div class="span-city-content" style="left: -93px; top: -104px;">
                    <div class="top-box">
                        <div>佛罗里达州</div>
                        <p>State of Florida</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in Florida_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

            <aside class="US-map-hot-city clearfix" style="left: 760px; top: 120px;">
                <span class="span-city" style="left: 0; top: 0;">纽约州</span>
                <div class="span-city-content" style="left: -108px; top: -84px;">
                    <div class="top-box">
                        <div>纽约州</div>
                        <p>State of New York</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in NewYork_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

            <aside class="US-map-hot-city clearfix" style="left: 810px; top: 130px;">
                <span class="span-city" style="left: 0; top: 0;">马萨诸塞州</span>
                <div class="span-city-content" style="left: -93px; top: -104px;">
                    <div class="top-box">
                        <div>马萨诸塞州</div>
                        <p>State of Massachusetts</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in Massachusetts_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>

            <aside class="US-map-hot-city clearfix" style="left: 770px; top: 150px;">
                <span class="span-city" style="left: 0; top: 0;">新泽西州</span>
                <div class="span-city-content" style="left: -99px; top: -105px;">
                    <div class="top-box">
                        <div>新泽西州</div>
                        <p>State of New Jersey</p>
                    </div>
                    <ul class="bottom-box">
                        <li v-for="(item, index) in NewJersey_MapHouseItem" :key="index" ><router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">{{ item.title }}</router-link></li>
                    </ul>
                </div>
            </aside>
        </figure>
    </section>
</template>

<script>
    import {mapState} from 'vuex';

    export default {
        data() {
            return {
                Washington_MapHouseItem: [],//全美地图静态展示——华盛顿州推荐房源
                California_MapHouseItem: [],//全美地图静态展示——加州推荐房源
                Texas_MapHouseItem: [],//全美地图静态展示——得克萨斯州
                Illinois_MapHouseItem: [],//全美地图静态展示——伊利诺斯州
                Georgia_MapHouseItem: [],//全美地图静态展示——佐治亚州
                Florida_MapHouseItem: [],//全美地图静态展示——佛罗里达州
                NewYork_MapHouseItem: [],//全美地图静态展示——纽约州
                Massachusetts_MapHouseItem: [],//全美地图静态展示——马萨诸塞州
                NewJersey_MapHouseItem: [],//全美地图静态展示——新泽西州

            }
        },
        computed: {
            ...mapState(['USStaticMapShow']), //从state获取全美地图静态展示是否显示隐藏
        },
        created() {
        },
        mounted() {
            //全美地图静态展示——获取地图推荐房源数据
            this.getMapHouseData('47');//华盛顿州
            this.getMapHouseData('5');//加州
            this.getMapHouseData('43');//得克萨斯州
            this.getMapHouseData('13');//伊利诺斯州
            this.getMapHouseData('10');//佐治亚州
            this.getMapHouseData('9');//佛罗里达州
            this.getMapHouseData('32');//纽约州
            this.getMapHouseData('21');//马萨诸塞州
            this.getMapHouseData('30');//新泽西州
        },
        methods: {
            //全美地图静态展示——获取地图推荐房源数据
            getMapHouseData(stateId) {
                this.$get(`/house/search/1/3?sid=${stateId}&field=time&direction=desc&countryId=1`).then(res => {
                    if (res.status === 0) {
                        switch (stateId){
                            case '47':
                                this.Washington_MapHouseItem = res.list;//华盛顿州
                                break;
                            case '5':
                                this.California_MapHouseItem = res.list;//加州
                                break;
                            case '43':
                                this.Texas_MapHouseItem = res.list;//得克萨斯州
                                break;
                            case '13':
                                this.Illinois_MapHouseItem = res.list;//伊利诺斯州
                                break;
                            case '10':
                                this.Georgia_MapHouseItem = res.list;//佐治亚州
                                break;
                            case '9':
                                this.Florida_MapHouseItem = res.list;//佛罗里达州
                                break;
                            case '32':
                                this.NewYork_MapHouseItem = res.list;//纽约州
                                break;
                            case '21':
                                this.Massachusetts_MapHouseItem = res.list;//马萨诸塞州
                                break;
                            case '30':
                                this.NewJersey_MapHouseItem = res.list;//新泽西州
                                break;
                        }
                    } else {
                        console.log(res.msg);
                    }
                })
            },

        },
        components: {}
    }
</script>

<style scoped lang="less" type="text/less">
    body {
        /*全美地图静态展示*/
        .US-static-map-box{
            text-align: center;
            >.US-map-bg {
                display: inline-block;
                width: 1150px;
                height: 413px;
                background-image: url(/static/img/US-map.jpg);
                background-image: -webkit-image-set(url(/static/img/US-map.jpg) 1x, url(/static/img/US-map-x2.jpg) 2x);
                background-repeat: no-repeat;
                background-size: 1150px 413px;
                margin: 30px 0 0 0;
                position: relative;
                >.US-map-hot-city{
                    position: relative;
                    >.span-city{
                        position: absolute;
                        display: inline-block;
                        padding: 3px 10px;
                        text-align: center;
                        z-index: 6;
                        font-size: 14px;
                        color: #fff;
                        background: #1273e1;
                        cursor: pointer;
                        border-radius: 2px;
                    }
                    >.span-city:before{
                        position: absolute;
                        content: "";
                        top: 100%;
                        left: 45%;
                        width: 0;
                        height: 0;
                        border-top: 5px solid #1273e1;
                        border-right: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-left: 5px solid transparent;
                    }
                    >.span-city:hover + .span-city-content{
                        z-index: 9;
                        opacity: 1;
                        filter: alpha(opacity=100);
                        visibility: visible;
                    }
                    >.span-city:hover{
                        z-index: 8;
                    }
                    >.span-city-content{
                        position: absolute;
                        display: inline-block;
                        z-index: 9;
                        border-radius: 2px;
                        box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
                        -webkit-transition: all ease-in 0.3s;
                        -o-transition: all ease-in 0.3s;
                        -moz-transition: all ease-in 0.3s;
                        -ms-transition: all ease-in 0.3s;
                        transition: all ease-in 0.3s;
                        filter: alpha(opacity=0);
                        opacity: 0;
                        visibility: hidden;
                        >.top-box{
                            text-align: center;
                            padding: 10px 30px 5px 30px;
                            color: #abc4e2;
                            font-size: 12px;
                            background: #1273e1;
                            >div{
                                color: #fff;
                                font-size: 18px;
                            }
                        }
                        >.bottom-box{
                            width: 300px;
                            padding: 5px 30px;
                            text-align: center;
                            font-size: 14px;
                            line-height: 20px;
                            background: #fff;
                            >li{
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: block;
                                text-align: center;
                                white-space: nowrap;
                                word-wrap: normal;
                                >a{
                                    color: #333;
                                }
                                >a:hover{
                                    color: #1890ff;
                                }
                            }
                        }
                    }
                    >.span-city-content:before{
                        z-index: 9;
                        position: absolute;
                        content: "";
                        top: 100%;
                        left: 45%;
                        width: 0;
                        height: 0;
                        border-top: 5px solid #fff;
                        border-right: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-left: 5px solid transparent;
                    }
                    >.span-city-content:hover{
                        z-index: 9;
                        opacity: 1;
                        filter: alpha(opacity=100);
                        visibility: visible;
                    }
                }
            }
        }
    }
</style>